<template>
  <div>
    <ItemsListComponent
      :items="items"
      :loading="loading"
      @selectItem="onSelectItem"
    ></ItemsListComponent>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, onMounted } from 'vue'
import ItemsListComponent from '@/components/items/ItemsList.component.vue'

import { useAppStore } from '@/store/root'
import { ItemInterface } from '@/models/items'

export default defineComponent({
  name: 'Home',
  components: {
    ItemsListComponent,
  },
  setup() {
    const { itemStore } = useAppStore()
    const { actions: itemStoreActions } = itemStore

    const items = computed((): ItemInterface[] => {
      return itemStore.getters.items
    })
    const loading = computed((): boolean => {
      return itemStore.getters.loading
    })

    const onSelectItem = async (id: number) => {
      await itemStoreActions.toggleItemSelected(id)
    }

    onMounted(async () => {
      await itemStoreActions.loadItems()
    })

    return {
      items,
      loading,
      onSelectItem,
    }
  },
})
</script>
